<template>
  <div class="all">
    <img src="../../../assets/SVG/TitleOne.svg" alt="">
    <img class="after-word" src="../../../assets/SVG/TitleTwo.svg" alt="">
    <div class="test">
      <p class="title">招生人数       <icon iconClass="renyuan" color='white'></icon></p>
    </div>
    <div class="echart" id="mychart" :style="myChartStyle"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      xData: [
        "2014年",
        "2016年",
        "2017年",
        "2018年",
        "2019年",
        "2020年",
        "2021年",
      ], //横坐标
      yData: [7630, 7603, 7812, 7876, 7907, 7868, 7950], //数据
      myChartStyle: {
        float: "left",
        width: "80%",
        height: "350px",
      }, //图表样式
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      // 基本折线图
      const option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2014年",
            "2016年",
            "2017年",
            "2018年",
            "2019年",
            "2020年",
            "2021年",
          ],
          axisLine: {
            lineStyle: {
              // X 轴颜色配置
              color: "#ffffff ",
            },
          },
        },
        yAxis: {
          type: "value",
          min: 7500,
          max: 8000,
          axisLine: {
            lineStyle: {
              // Y 轴颜色配置
              color: "#ffffff",
            },
          },
        },
        series: [
          {
            data: [7630, 7603, 7812, 7876, 7907, 7868, 7950],
            type: "line",
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(238, 153, 94)" },
                  { offset: 1, color: "rgba(238, 153, 94,0)" },
                ]),
              },
            },
            symbolSize: 5, //设置折线上圆点大小
            itemStyle: {
              normal: {
                   symbol: 'circle',//折线点设置为实心点
                 color: "#E41212",//折线点的颜色
                lineStyle: {
                  width: 1, // 设置虚线宽度
                  type: "solid", // 虚线'dotted' 实线'solid'
                  color: "#fff",
                },
              },
            },
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.all {
  height: 320px;
  width: 90%;
  display: flex;
  transform: translateY(-40px);
    img{
        transform: scale(0.6) translateY(-30px);
    }
    .after-word{
        transform: scale(0.6) translate(-20px,100px);
        margin-right: 100px;
    }
}
.echart {
  z-index: 999;
}
.title {
  width: 32px;
  height: 260px;
  margin-top: 40px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  border-radius: 0.5%;
  border-left: 2px solid #fff;
  border-image: linear-gradient(#fff, #fff0) 30 30;
  /* border-image-source: linear-gradient(to bottom, #8f41e9, #578aef); */
  background: linear-gradient(to bottom, #ee995e, rgba(0,0,0,0));
}
</style>
